﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Geosearch.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Geosearch</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#search-panel').append("<ul class='auto-complete-list'></ul>");

            $('#search').keyup(function () {
                userinput = $("#search").val().trim();
                PageMethods.GetCountryNames(userinput, 5,
                function (response) {
                    //sucess
                    $(".auto-complete-list").children().remove();
                    $("#uiTestPanel p").fadeOut('slow', function () {
                        // Animation færdig.
                        $(this).remove();
                    });

                    if (userinput != "") {
                        $.isEmptyObject(response) ? $(".auto-complete-list").css("visibility", "hidden") : $(".auto-complete-list").css("visibility", "visible");
                        $.each(response, function (key, value) {
                            $(".auto-complete-list").append("<li class='result'>" + value + "</li>");
                        });
                        // Tilføj diverse events til de oprettede LI
                        $(".auto-complete-list li").each(function (intIndex) {
                            $(this).bind({
                                click: function () {
                                    $("#search").val($(this).text()).focus();
                                    $(".auto-complete-list").children().remove();
                                    $(".auto-complete-list").css("visibility", "hidden");
                                },
                                mouseenter: function () {
                                    //console.log("mouseenter index: " + intIndex);
                                    $(this).css("background-color", "Lime");
                                },
                                mouseleave: function () {
                                    //console.log("mouseleave index: " + intIndex);
                                    $(this).css("background-color", "White");
                                }
                            });
                        });
                    }
                },
                function (response) {
                    //fail
                    $.each(response, function (key, value) {
                        $("#wrapper").append("<div>" + key + " : " + value + "</div>");
                    });
                });
            });




            //var event2key = {'37':'left', '39':'right', '38':'up', '40':'down', '13':'enter', '27':'esc', '32':'space', '107':'+', '109':'-', '33':'pageUp', '34':'pageDown'}
            $('body').bind('keypress', function (e) {
                //console.log(e.keyCode);
                if (e.keyCode == 40) {
                    console.log("PIL NED");

                } //$(".auto-complete-list li").css("background-color", "Lime");
            });
            /*
            $('.result').bind('mouseenter mouseleave', function () {
            //$(this).toggleClass('entered');
            //$(this).css("background-color", "Lime");
            console.log("mouse");
            });*/
        });
    </script>
    <style type="text/css">
    body
    {
        text-align:center;
        font-family:Arial;
        font-size:12px;
    }
    #wrapper
    {
        padding-top:80px;
        text-align:left;
        width:500px;
        margin:0 auto;
        clear:both;
    }
    #search-panel
    {
        float:left;
    }
    #search
    {
        width:200px;
        margin:0;
        padding:6px;
    }
    .auto-complete-list
    {
        width:212px;
        margin:0;
        padding:0;
        border:1px solid #eee;
        visibility:hidden;
    }
    .auto-complete-list li
    {
        list-style:none;
        width:200px;
        /*background-color:#ccc;*/
        padding:6px;
        cursor:pointer;
    }
    #uiTestPanel
    {
        float:left;
        margin: -5px 0 0 30px;
    }
    p{ margin:0;padding:0;}
    
    
    
    
    /**/
    dl.table-display
    {
	    float: left;
	    width: 220px;
	    margin: 0;
	    padding: 0;
	    border-bottom: 1px solid #999;
	    /*border-top: 1px solid #999;
	    background-color:Lime;*/
    }

    .table-display dt
    {
	    clear: left;
	    float: left;
	    width: 100px;
	    margin: 0;
	    padding: 5px;
	    border-top: 1px solid #999;
	    font-weight: bold;
    }

    .table-display dd
    {
	    float: left;
	    width: 100px;
	    margin: 0;
	    padding: 5px;
	    border-top: 1px solid #999;
    }
    /*
    .table-display dd:first-child
    {
        border-bottom: 1px solid #999;
    }
    dl dt:last-child
    {
        border-bottom: 1px solid #999;
        background-color:Lime;
    }    */
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="uiScriptManager" EnablePageMethods="true">
    </asp:ScriptManager>
        <div id="wrapper">
            <div id="search-panel">
                <input runat="server" type="text" name="search" id="search" autocomplete="off" />
            </div>
            <asp:Panel ID="uiTestPanel" runat="server">
            </asp:Panel>
<!--
             <dl class="table-display">
	            <dt>Country: </dt>
	            <dd>Danmark</dd>
	            <dt>Population</dt>
	            <dd>5695236</dd>
	            <dt>Capital</dt>
	            <dd>Copenhagen</dd>
            </dl> 
-->
        </div>
    </form>
</body>
</html>
